<script setup>
import { getGoodsProduct, setGoodsProduct, delGoodsProduct } from "@/api/sideShow"
import dayjs from "dayjs"
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from "vue"

const formData = ref({})

const data = ref([])
const total = ref(0)
const visible = ref(false)


const getData = async () => {
	try {
		const res = await getGoodsProduct()
		data.value = res
	} catch (e) {
	}
}
getData()


// onSubmit
const onSubmit = async () => {
	await setGoodsProduct(formData.value)
	getData()
	visible.value = false
	formData.value = {}
}

// EditHandler
const EditHandler = (row) => {
	row.id ? formData.value = { ...row } : formData.value = {}
	visible.value = true
}

// 删除事件
const DelHandler = async (row) => {
	try {
		await delGoodsProduct(row.id)
		await getData()
		ElMessage.success("删除完成")
	} catch (e) { }
}


</script>

<template>
	<el-card>
		<div class="mb-[20px] flex justify-between">
			<el-button type="primary" @click="EditHandler">新增</el-button>
		</div>
		<el-table :data="data" border stripe>
			<el-table-column label="ID" prop="id"></el-table-column>
			<el-table-column label="标题" prop="title"></el-table-column>
			<el-table-column label="图片" prop="url">
				<template #default="{ row }">
					<img :src="row.url" style="width: 100px">
				</template>
			</el-table-column>
			<el-table-column label=" 创建时间">
				<template #default="{ row }">
					{{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
				</template>
			</el-table-column>
			<el-table-column label="更新时间">
				<template #default="{ row }">
					{{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button type="primary" size="small" @click="EditHandler(row)">编辑</el-button>
					<el-button type="danger" size="small" @click="DelHandler(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹层 -->
		<Dialog title="新增展示位" v-model:visible="visible" @onSubmit="onSubmit">
			<el-form label-position="left" label-width="auto" style="max-width: 600px">
				<el-form-item label="标题">
					<el-input v-model="formData.title"></el-input>
				</el-form-item>
				<el-form-item label="展示图">
					<UpLoad v-model:images="formData.url"></UpLoad>
				</el-form-item>
			</el-form>
		</Dialog>
	</el-card>
</template>

<style scoped lang="scss"></style>
